<!--点名班车基础详情页-->
<template>
    <el-container class="layout-container" v-loading="loading">
        <!--<el-header class="layout-header" v-show="activePage === 0">
            <div>
                <el-button v-if="isEdit" v-show="readonly" type="primary" @click="readonly = false">编辑</el-button>
                <el-button v-show="!readonly" type="default" @click="readonly = true">取消</el-button>
                <el-button v-show="!readonly" type="primary" @click="handleSave">保存</el-button>
            </div>
            <div>

                &lt;!&ndash;<el-button type="primary" @click="handleExport('school')">导出站点总名单</el-button>&ndash;&gt;
                &lt;!&ndash;<el-button type="primary" @click="handleExport('go')">导出班车去程名单</el-button>&ndash;&gt;
                &lt;!&ndash;<el-button type="primary" @click="handleExport('leave')">导出班车回程名单</el-button>&ndash;&gt;
            </div>
        </el-header>-->
        <el-container class="layout-container">
            <el-aside class="layout-aside">
                <div class="nav-warp">
                    <el-scrollbar>
                        <div class="nav-item" :class="{'active': activePage === 0}" @click="togglePage(0)">班车管理</div>
                        <div class="nav-item" v-if="isSeeSeat" :class="{'active': activePage === 1}" @click="togglePage(1)">点名座位表</div>
                        <div class="nav-item" v-if="isSeeStop" :class="{'active': activePage === 2}" @click="togglePage(2)">点名站点</div>
                    </el-scrollbar>
                </div>
            </el-aside>
            <el-main class="layout-main" v-show="activePage === 0">

                <div class="btns-wrap">
                    <el-button v-if="isEdit" v-show="readonly" type="primary" @click="readonly = false">编辑</el-button>
                    <el-button v-show="!readonly" type="default" @click="readonly = true">取消</el-button>
                    <el-button v-show="!readonly" type="primary" @click="handleSave">保存</el-button>
                </div>
                <div class="subfield-layout">
                    <div class="subfield-wrap">
                        <div class="subfield-title">信息</div>
                        <div class="subfield-main">
                            <div class="subfield-content">
                                <m-form ref="formRef" :fields="fieldList" :readonly="readonly" :value="mData"></m-form>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-main class="layout-main ref-wrap" v-show="activePage !== 0">
                <r-seat :shuttle-data="mData" v-if="isSeeSeat && activePage === 1"></r-seat>
                <r-stop :shuttle-data="mData" v-if="isSeeStop && activePage === 2"></r-stop>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
  import {ref,reactive,provide, defineEmits,defineProps,watch} from 'vue';
  import {useRoute} from 'vue-router'
  import MForm from '@/components/common/Form/Form'
  import RStop from '../RollcallBasicShuttleStop/RollcallBasicShuttleStop'
  import RSeat from './RollcallBasicShuttleSeat'
  import {getRollCallBasicShuttleData, publicAllData, editRollCallBasicShuttleData,getSchool,getTicketPackageLabel,getPassengerBySchoolAndMonth,getPassengerGoToSchool,getPassengerLeaveSchool} from '@/request/api/basicData'
  import {refOpt} from "../const";
  import {hasSeeAuthority,getAuthority} from "../../utils/permission";

  const props = defineProps(['data']),
    emit = defineEmits(['save']);

  const fieldList = ref([
    {field_id: 'shuttle_no',disabled: true, label: '点名班车号',type: 'text',col:2,required: true},
    {field_id: 'shuttle_name', label: '点名班车名',type: 'text',col:2,required: true},
    {field_id: 'effective_date_begin',label: '有效日期起',type: 'date',dateFormat: 'YYYY-MM-DD',col: 2 },
    {field_id: 'effective_date_end',label: '有效日期止',type: 'date',dateFormat: 'YYYY-MM-DD',col: 2 },
    {...refOpt.shuttle_seat_id,col:2, label: '售票班车座位表号'},
    {...refOpt.shuttle_seat_name,col:2, label: '售票班车座位表名'},
    {field_id: 'shuttle_type',label: '班车类型',type: 'picklist',options: [{label:'车站客运班车',value:'车站客运班车'},{label:'定制',value:'定制'}],defaultValue:'车站客运班车',col: 2 },
    {...refOpt.shuttle_direction_name,field_id: 'direction',label: '方向',col:2, valueKey: [{'direction': 'shuttle_direction_name'}] ,},
    {field_id: 'is_used',label: '启用标识', type: 'bool',col:2,},
    {field_id: 'first_departure_time',label: '始发时间',type: 'datetime',col:2,},
    {field_id: 'shuttles',label: '售票班车名串',type: 'text',col:2,},
    {field_id: 'line_name',label: '线路名',type: 'text',col:2},
    // {col: 2},
    {field_id: 'first_stop_name',label: '起点',type: 'text',col:2},
    {field_id: 'last_stop_name',label: '终点',type: 'text',col:2},
    {field_id: 'seat_count',label: '客座数',type: 'number',col:2,},
    {field_id: 'vehicle_no',label: '车牌号码',type: 'text',col:2,},
    {...refOpt.driver_no,col:2,},
    {...refOpt.driver_name,col:2,},
    {...refOpt.caretaker_no,col:2,},
    {...refOpt.caretaker_name,col:2,},
    {...refOpt.caretaker_no, label: '照管员号2',field_id: 'caretaker_no_2',col:2},
    {...refOpt.caretaker_name, label: '照管员名2',field_id: 'caretaker_name_2',col:2, valueKey: [{'caretaker_no_2': 'caretaker_no'},{'caretaker_name_2': 'caretaker_name'}]},
    {...refOpt.caretaker_no, label: '照管员号3',field_id: 'caretaker_no_3',col:2},
    {...refOpt.caretaker_name, label: '照管员名3',field_id: 'caretaker_name_3',col:2, valueKey: [{'caretaker_no_3': 'caretaker_no'},{'caretaker_name_3': 'caretaker_name'}]},
    {...refOpt.rollcall_admin_no,col:2,},
    {...refOpt.rollcall_admin_name,col:2,},
    {...refOpt.rollcall_admin_no, label: '点名管理人号2',field_id: 'rollcall_admin_no_2',col:2,},
    {...refOpt.rollcall_admin_name, label: '点名管理人名2',field_id: 'rollcall_admin_name_2',col:2, valueKey: [{'rollcall_admin_no_2': 'rollcall_admin_no'},{'rollcall_admin_name_2': 'rollcall_admin_name'}],},
    {...refOpt.rollcall_admin_no, label: '点名管理人号3',field_id: 'rollcall_admin_no_3',col:2,},
    {...refOpt.rollcall_admin_name, label: '点名管理人名3',field_id: 'rollcall_admin_name_3',col:2, valueKey: [{'rollcall_admin_no_3': 'rollcall_admin_no'},{'rollcall_admin_name_3': 'rollcall_admin_name'}],},
    {field_id: 'remarks',label: '备注',type: 'text',col:4,},
  ])

  let mData = ref({}),
    formRef = ref(null),
    activePage = ref(0),
    readonly = ref(true),
    loading = ref(false),
    isEdit = ref(true),     //班车是否可编辑
    isSeeTicket = ref(true),    //班车套票是否可见
    isSeeStop = ref(true),    //班车站点是否可见
    isSeeSeat = ref(true),    //班车座位是否可见
    isSeeSchool = ref(true)    //班车站点是否可见
  // getRefPermission();
  //数据变化
  /*function handleChange(val) {
    console.log(1,val);
    let {field,value} = val,
      {field_id,type,entityKey} = field;
      data[field_id] = value;
    console.log(data);
  }*/
  watch(() => props.data,(newVal) =>{
    getDetailData(newVal.row_id)
  },{immediate: true})
  //保存数据
  function handleSave() {
    if (!isEdit.value) {
      ElMessage({
        type: 'warning',
        message: '抱歉，您没有权限编辑该模块数据'
      })
      return
    }
    formRef.value.validate(isValid => {
      if (isValid) {
        loading.value = true;
        let data = formRef.value.getData()
        editRollCallBasicShuttleData(data).then(res => {
          loading.value = false;
          if (res.errcode !== 0) return;

          readonly.value = true
          publicAllData(data.shuttle_seat_id || data.shuttle_id);
          ElMessage({type: 'success',message: '修改成功'})
          emit('save')
        })
      }
    })
  }
  function togglePage(page) {
    activePage.value = page;
  }

  function getDetailData(row_id) {
    getRollCallBasicShuttleData({row_id}).then(res => {
      if (res.errcode !== 0)return;
      let data = res.row[0];
      let obj = {};
      fieldList.value.forEach(item =>{
        let val = data[item.show_field || item.field_id]
        val && (obj[item.field_id] = val)
      });
      mData.value = data;
    })
  }

  function getRefPermission(){
    isSeeTicket.value = hasSeeAuthority('shuttlePackage')
    isSeeStop.value  = hasSeeAuthority('shuttleStop')
    isSeeSeat.value  = hasSeeAuthority('shuttleSeat')
    isSeeSchool.value  = hasSeeAuthority('shuttleSchool')

    isEdit.value = getAuthority('shuttle').is_edit;
  }


  provide('refresh', getDetailData)

</script>

<style scoped lang="less">
    @import '../../assets/css/pageDtl.less';
</style>
